<script>
import AuthorCard from './authorCard.vue'
import BreadCrumb from "@/views/BookInformation/components/breadCrumb.vue";
import BookCard from "./bookCard.vue"
import Nav from "@/components/Nav/nav.vue";
export default {
  components: {
    Nav,
    BreadCrumb,
    AuthorCard,
    BookCard
  }
}
</script>

<template>
  <div class="header">
    <div class="bread">
      <!-- <bread-crumb></bread-crumb> -->
    </div>
    <div class="content">
      <div class="card">
        <div class="bookCard">
          <BookCard></BookCard>
        </div>
        <div class="authorCard">
          <AuthorCard></AuthorCard>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 设置为水平排列并且左右对齐 */
  overflow: hidden;
  width:100vw;
}

.content {
  display: flex; /* 父级容器水平排列 */
  flex-direction: row; /* 父级容器纵向排列内部元素 */
}
.card {
   display: flex;
   height: auto;
   margin: 20px;
   flex-direction: row; /* 内部元素竖直排列 */
   justify-content: space-between;
 }
.bookCard{
  margin-left: 10px;
 }
.authorCard {
    margin-left: 100px;
   display: flex;
   flex-direction: column;
}
</style>